<template>
  <div>
    <!-- 第一行 -->
    <a-row :gutter="[24, 24]" class="row-1">
      <!-- 访问量 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="hover-border-color">
          <a-card title="访问量">
            <template #extra>
              <a-tag color="success">日</a-tag>
            </template>
            <div class="content">
              <div class="numeral">12,600</div>
              <div class="chart">
                日同比 10%
                <CaretUpOutlined class="error-color" />&nbsp; &nbsp; &nbsp;
                日同比 11%
                <CaretDownOutlined class="success-color" />
              </div>
            </div>
          </a-card>
          <div class="footer">总访问量&nbsp;100万</div>
        </div>
      </a-col>
      <!-- 订单量 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="hover-border-color">
          <a-card title="订单量">
            <template #extra>
              <a-tag color="error">周</a-tag>
            </template>
            <div class="content">
              <div class="numeral">
                <span>1,100</span>
              </div>
              <div class="chart" id="order-container"></div>
            </div>
          </a-card>
          <div class="footer">转化率&nbsp;60%</div>
        </div>
      </a-col>
      <!-- 销售额 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="hover-border-color">
          <a-card title="销售额">
            <template #extra>
              <a-tag color="processing">月</a-tag>
            </template>
            <div class="content">
              <div class="numeral">
                <span>￥120,600</span>
              </div>
              <div class="chart">
                <a-progress :percent="50" :show-info="false" />
              </div>
            </div>
          </a-card>
          <div class="footer">总销售额&nbsp;200万</div>
        </div>
      </a-col>
      <!-- 支付笔数 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="hover-border-color">
          <a-card title="支付笔数">
            <template #extra>
              <a-tag color="processing">月</a-tag>
            </template>
            <div class="content">
              <div class="numeral">
                <span>1,100</span>
              </div>
              <div class="chart" id="pay-container"></div>
            </div>
          </a-card>
          <div class="footer">转化率&nbsp;60%</div>
        </div>
      </a-col>
    </a-row>
    <a-row class="mt-24 body-background row-2" type="flex" :gutter="[24, 24]">
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <TeamOutlined style="color:#1890ff" />
          </span>
          <div>用户</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <BarChartOutlined style="color:#95de64" />
          </span>
          <div>分析</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <ShoppingCartOutlined style="color:#ff9800" />
          </span>
          <div>商品</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <ContainerOutlined style="color:#9c27b0" />
          </span>
          <div>订单</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <CreditCardOutlined style="color:#ffeb3b" />
          </span>
          <div>票据</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <MailOutlined style="color:#5cdbd3" />
          </span>
          <div>消息</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <TagsOutlined style="color:#9c27b0" />
          </span>
          <div>标签</div>
        </div>
      </a-col>
      <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
        <div class="grid-item hover-border-color">
          <span class="icon">
            <SettingOutlined style="color:#ffc069" />
          </span>
          <div>配置</div>
        </div>
      </a-col>
    </a-row>
    <!-- 访问量柱状图 -->
    <div class="lyt-component-lg mt-24 pt-0">
      <a-tabs v-model:activeKey="activeTabKey" size="large">
        <a-tab-pane key="访问量" forceRender>
          <template #tab>
            <span>
              <BarChartOutlined />访问量
            </span>
          </template>
          <div id="visits-container"></div>
        </a-tab-pane>
        <a-tab-pane key="流量趋势" forceRender>
          <template #tab>
            <span>
              <AreaChartOutlined />流量趋势
            </span>
          </template>
          <div id="flow-container"></div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { nextTick, ref, computed, watch } from 'vue';
import { useStore } from '@/store/store';
import { Area, Column, Plot } from '@antv/g2plot';
//存放g2实例
const chartList: Plot<any>[] = []
export default { name: 'analysis' };
</script>
<script lang="ts" setup>
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { TeamOutlined, BarChartOutlined, ShoppingCartOutlined, ContainerOutlined } from '@ant-design/icons-vue';
import { CreditCardOutlined, MailOutlined, TagsOutlined, SettingOutlined, AreaChartOutlined } from '@ant-design/icons-vue';
// 订单量
const orderData = [
  {
    "key": "2021-06-20",
    "value": 120
  },
  {
    "key": "2021-06-21",
    "value": 168
  },
  {
    "key": "2021-06-22",
    "value": 60
  },
  {
    "key": "2021-06-23",
    "value": 180
  },
  {
    "key": "2021-06-24",
    "value": 130
  },
  {
    "key": "2021-06-25",
    "value": 179
  },
  {
    "key": "2021-06-26",
    "value": 128
  },
]
nextTick(() => {
  chartList.push(
    new Area('order-container', {
      data: orderData,
      xField: 'key',
      yField: 'value',
      smooth: true,
      xAxis: {
        label: null,
        grid: null,
        line: null,
        range: [0, 1],
      },
      yAxis: {
        label: null,
        grid: null,
        line: null,
      }
    })
  )
})
//支付笔数量
const payData = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  },
  {
    type: '母婴用品',
    sales: 48,
  },
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
]
nextTick(() => {
  chartList.push(
    new Column('pay-container', {
      data: payData,
      xField: 'type',
      yField: 'sales',
      xAxis: {
        label: null,
        grid: null,
        line: null,
        range: [0, 1],
      },
      yAxis: {
        label: null,
        grid: null,
        line: null,
      },
      meta: {
        sales: {
          alias: '笔数',
        },
      },
    })
  )
})

//访问量|流量趋势
const activeTabKey = ref('访问量')
const visitsData = [
  { key: '一月', value: 2000 },
  { key: '二月', value: 3980 },
  { key: '三月', value: 4589 },
  { key: '四月', value: 6547 },
  { key: '五月', value: 8970 },
  { key: '六月', value: 7890 },
  { key: '七月', value: 6589 },
  { key: '八月', value: 5670 },
  { key: '九月', value: 7390 },
  { key: '十月', value: 8000 },
  { key: '十一月', value: 8100 },
  { key: '十二月', value: 8300 },
]
const flowData = [
  { key: '00:00', value: 10 }, { key: '01:00', value: 20 }, { key: '02:00', value: 30 },
  { key: '03:00', value: 40 }, { key: '04:00', value: 50 }, { key: '05:00', value: 99 },
  { key: '06:00', value: 300 }, { key: '07:00', value: 500 }, { key: '08:00', value: 600 },
  { key: '09:00', value: 1000 }, { key: '10:00', value: 1400 }, { key: '11:00', value: 1600 },
  { key: '12:00', value: 1700 }, { key: '13:00', value: 1000 }, { key: '14:00', value: 800 },
  { key: '15:00', value: 700 }, { key: '16:00', value: 900 }, { key: '18:00', value: 1200 },
  { key: '19:00', value: 2600 }, { key: '20:00', value: 3200 }, { key: '21:00', value: 1600 },
  { key: '22:00', value: 600 }, { key: '23:00', value: 100 },
]
nextTick(() => {
  chartList.push(
    new Column('visits-container', {
      data: visitsData,
      xField: 'key',
      yField: 'value',
      theme: 'custom-theme',
    }),
    new Area('flow-container', {
      data: flowData,
      xField: 'key',
      yField: 'value',
      smooth: true,
    })
  )
})

//绘制图表+切换主题颜色
const store = useStore()
watch(computed(_ => store.state.app.themeColor), changeChartTheme)
nextTick(() => {
  chartList.forEach(item => {
    item.render()
    changeChartTheme()
  })
})
function changeChartTheme() {
  chartList.forEach(item => {
    item.update({
      theme: {
        styleSheet: { brandColor: store.state.app.themeColor }
      }
    })
  })
}
</script>
<style lang="less" scoped>
.hover-border-color {
  &:hover {
    border: var(--primary-color-4);
    box-shadow: 0 0 0 2px var(--primary-color-1);
  }
}
.row-1 {
  &:deep(.ant-card-body) {
    padding-bottom: 0;
  }
  .content {
    min-height: 40px;
    .numeral {
      height: 50px;
      font-size: @heading-2-size;
      color: @heading-color;
    }
    .chart {
      height: 40px;
      padding-bottom: 10px;
    }
  }
  .footer {
    background: @component-background;
    padding: @padding-xs @margin-lg;
    border-top: 1px solid @border-color-light;
  }
}
.row-2 {
  &:deep(.ant-card-body) {
    padding: 0;
  }
  .grid-item {
    cursor: pointer;
    text-align: center;
    padding: @padding-md 0;
    background-color: @component-background;
    .icon {
      font-size: 28px;
      margin-bottom: @padding-sm;
    }
  }
}
</style>
  